let sound = audioPlay()
const CENTER = [30.19637640408235, 120.18273066611019];
let iMap = new Map({
  id: 'mapid',
  center: CENTER,
  zoom: 13,
  tileLayerUrl: 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
  click: onMapClick
})

let imageUrl = `${LOCAL_ROOT}static/image/template.jpeg`
let imageBounds = [
  [30.161603, 120.150604],
  [30.224217, 120.228367]
]
L.imageOverlay(imageUrl, imageBounds).addTo(iMap.getMap());

var popup = L.popup();

function onMapClick(e) {
  popup
    .setLatLng(e.latlng)
    .setContent("You clicked the map at " + e.latlng.toString())
    .openOn(iMap.getMap());
}
// setTimeout(() => {
//   getLocation();
// }, 1000);

// function getLocation() {
//   wxutil.getLocation({
//     type: 'wgs84',
//     success: function (res) {
//       document.getElementById('location').innerText = JSON.stringify(res)
//     },
//     fail: function (e) {
//       document.getElementById('location').innerText = e.errMsg;
//     },
//     complete: function () {
//       console.log('end')
//       setTimeout(() => {
//         getLocation();
//       }, 5000);
//     }
//   })

// }



// L.marker([30.19637640408235, 120.18273066611019]).addTo(map)
//   .bindPopup('A pretty CSS3 popup.<br> Easily customizable.')
//   .openPopup();

iMap.addMarker(CENTER, {
  url: `${LOCAL_ROOT}static/image/point.jpg`,
  click: function (e) {
    wxutil.navigateTo({
      url: '../story/story'
    })

    // document.getElementById('mapid').style.height = '50vh'
    // iMap.resizeContainer()
    // iMap.setCenterAndZoom(CENTER, 15)
    // document.querySelector('.dialog-window').style.display = '';
  }
})

let icon = iMap.createIcon(`${LOCAL_ROOT}static/image/sound.jpg`, {
  iconSize: [40, 20],
  iconAnchor: [0, 20]
});

iMap.addMarker(CENTER, {
  icon,
  click: function (e) {
    // alert('aaa')
    sound.setSrc(`${LOCAL_ROOT}static/sound/10418`);
    sound.replay()
  }
})

let marker = iMap.createMarker([30.222437, 120.17292], {
  icon: iMap.createIcon(`${LOCAL_ROOT}static/image/point_mw.jpg`),
  // draggable: true
});

marker.on('click', e => {
  //document.querySelector('.dialog-window').style.display = '';
  wxutil.navigateTo({
    url: '../beautifulGoods/good'
  })
})

document.getElementById('testcheck').addEventListener('change', function (e) {
  wxutil.postMessage({
    data: {
      msg: '显示点'
    }
  })
  if (this.checked) {
    marker.addTo(iMap.getMap())
  } else {
    marker.remove()
  }
})

document.getElementById('dialog-close').addEventListener('click', e => {
  document.getElementById('mapid').style.height = ''
  iMap.resizeContainer()
  document.querySelector('.dialog-window').style.display = 'none';
  iMap.setCenterAndZoom(CENTER, 13)
});